<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- form 翻译表单 容器标签-->
	<!-- method 提交： get 地址栏url地址后面进行拼接 ?key=value&key1=value1 post 在请求body里面进行编码提交 http协议 -->
	<!-- action 提交的地址 http://a.cn/register.php -->
	<form method="post" action="http://a.cn/register.php">
		<!-- 表单的子元素 -->
		<!-- 注册：输入框 -->
		<h1>注册表单</h1>
		<!-- input type属性用于定义输入的类型，1. 文本输入text 2. 密码输入 password 不会明文显示 ***** -->
		<p>
			<!-- name属性实际意义就是为了让后端程序接受用户在表单里面填写的信息 -->
			<!-- 除了一组内的表单元素，其他都要具有唯一性 -->
			<!-- autocomplete 阻止表单的自动完成。自动完成浏览器的自己的行为 -->
			用户名：<input type="text" name="username" placeholder="用户名以字母或者数字组成" autocomplete="off">
		</p>
		<p>
			密码：<input type="password" name="pwd">
		</p>

		<p>
			确认密码：<input type="password" name="repwd">
		</p>

		<!-- 选择用户的性别 radio 收音机 磁带-->
		<!-- radio 是一组，存在多个里面选择一个 ，互斥  radio 单选-->
		<!-- checked 属性可以只写一个属性名，不写属性值也是可以的 -->
		<!-- gender 性别 -->
		<p>
			性别：
			<input type="radio" name="gender"> 男
			<input type="radio" name="gender"> 女
			<!-- <input type="radio" name="gender" checked="checked"> 保密 -->
			<input type="radio" name="gender" checked> 保密

		</p>

		<p>
			<!-- 一般使用下拉选择 select 容器 元素 <option>选项</option> -->
			<!-- option 里面的 value 值要写英文或者拼音不要写中文，是为了后端程序员到时候可以接受表单提交的内容 -->
			<!-- 有的时候回给用户一个默认的选择 -->
			<!-- selected 属性用于下拉框默认选中 也可以只写 selected -->
			地域：
			<select name="area">
				<option value="">请选择...</option>
				<option value="sh" selected="selected">上海</option>
				<!-- <option value="sh" selected>上海</option> -->
				<option value="gz">广州</option>
				<option value="sz">深圳</option>
			</select>

		</p>

		<p>
			<!-- textarea 收集大段文本信息 比 input type="text"  大一点-->
			个人简介： 
			<!-- rows 设置行 cols 列 -->
			<textarea rows="10" cols="20">
				
			</textarea>
		</p>
		<p>
			<!-- <input type="button" value="提交"> -->
			<!-- 一点击可以将用户填写的内容提交到后端程序里面 以什么样的方式 ？ 提交到哪里， -->
			<input type="submit" value="提交">
			<!-- reset 用户填写的内容清空 -->
			<input type="reset" value="清空">
		</p>

	</form>
</body>
</html>